<template>
  <div class="page-container">
    <div class="s-form">
      <page-form :model="form" layout="vertical" ref="formRef" :rules="formRules">
        <card title="基本信息">
          <page-form-row>
            <page-form-item field="supplierName" label="供应商名称" required :rules="{ required: true, message: '请输入供应商名称' }">
              <a-input v-model="form.supplierName" placeholder="请输入" :max-length="30" allow-clear />
            </page-form-item>
            <page-form-item field="formSupplierType" label="供应商类型" required :rules="{ required: true, message: '请选择供应商类型' }">
              <a-select placeholder="请选择" multiple v-model="form.formSupplierType" allow-clear>
                <a-option v-for="item in supplierPageData.supplierTypeList" :key="item.value" :value="item.value.toString()">
                  {{ item.label }}</a-option
                >
              </a-select>
            </page-form-item>
            <page-form-item field="address" label="地址">
              <a-input v-model="form.address" placeholder="请输入" :max-length="100" allow-clear />
            </page-form-item>
          </page-form-row>
        </card>
        <card title="供应商联系人">
          <page-form-row>
            <page-form-item field="contactsName" label="姓名">
              <a-input v-model="form.contactsName" placeholder="请输入" :max-length="20" allow-clear />
            </page-form-item>
            <page-form-item field="contactsMobile" label="手机号">
              <a-input v-model="form.contactsMobile" placeholder="请输入" :max-length="11" @keyup="keyupPhone" allow-clear />
            </page-form-item>
          </page-form-row>
        </card>
        <card title="发票信息">
          <page-form-row>
            <page-form-item field="invoiceHead" label="抬头">
              <a-input v-model="form.invoiceHead" placeholder="请输入" :max-length="30" allow-clear />
            </page-form-item>
            <page-form-item field="invoiceType" label="发票类型">
              <a-select placeholder="请选择" v-model="form.invoiceType" allow-clear>
                <a-option v-for="item in supplierPageData.invoiceTypeList" :key="item.value" :value="item.value.toString()">
                  {{ item.label }}</a-option
                >
              </a-select>
            </page-form-item>
            <page-form-item field="invoiceNum" label="纳税人识别号">
              <a-input v-model="form.invoiceNum" placeholder="请输入" :max-length="30" allow-clear />
            </page-form-item>
            <page-form-item field="invoiceAddress" label="地址">
              <a-input v-model="form.invoiceAddress" placeholder="请输入" :max-length="50" allow-clear />
            </page-form-item>
            <page-form-item field="invoicePhone" label="电话">
              <a-input v-model="form.invoicePhone" placeholder="请输入" :max-length="20" allow-clear />
            </page-form-item>
          </page-form-row>
        </card>

        <!-- 银行账号 -->
        <BankAccount ref="bankAccountRef" :form="form" />

        <card title="合同信息">
          <div class="flex h-content">
            <drag-upload v-model="form.contractFileId" :accept="['JPG', 'JPEG', 'PNG', 'PDF', 'DOC', 'DOCX']" :maxMB="50" class="mr-40px" />
            <page-form-item label="合同有效期">
              <i-range-picker v-model="form.dateContract" style="width: 280px" @change="(val) => changeDateFn(val, item)" />
            </page-form-item>
          </div>
        </card>
        <card title="结算日配置" :showDivider="false">
          <a-alert class="alert-txt">
            <template #icon> <icon-exclamation-circle /> </template>
            注意：当选择了30或31日为结算日时，对于没有30或31天的月份，将默认取对应月份的最后一天作为预警提醒。
          </a-alert>
          <div class="settlement-method">
            <page-form-item field="settleType" label="结算方式">
              <a-radio-group v-model="form.settleType">
                <a-radio :value="item.value.toString()" v-for="item in supplierPageData.settleTypeList" :key="item.value">
                  {{ item.label }}
                  <a-tooltip :content="labelTooltipContentData[item.value]">
                    <icon-question-circle />
                  </a-tooltip>
                </a-radio>
              </a-radio-group>
            </page-form-item>
            <span class="day-box" v-if="form.settleType && form.settleType != 1">
              <a-select style="width: 240px" placeholder="请选择" v-model="form.settleDay" :allow-clear="true">
                <a-option v-for="item in 31" :key="item" :value="item"> {{ item }}</a-option>
              </a-select>
              <span class="day-txt">日，进行结算</span>
            </span>
          </div>
        </card>
      </page-form>
    </div>
  </div>
  <page-form-footer :ok-loading="okLoading" @ok="submitFn" />
</template>

<script setup name="SupplierForm">
  import { ref, onMounted, provide } from 'vue'
  import { useRoute } from 'vue-router'
  import { usePageDict } from '@/hooks/useDict'
  import { supplierSave, supplierDetail } from '@/api/market/supplier'
  import { formRules } from '../options'
  import useNavigate from '@/hooks/useNavigate'
  import BankAccount from '@/views/market/components/bank-account.vue'

  const { navigateBack } = useNavigate()
  const route = useRoute()
  const id = ref(route.params?.id || null)
  const form = ref({ supplierType: '', settleDay: 1, backInfoList: [] }) // 编辑信息
  const supplierPageData = usePageDict('supplierPageData') // 供应商类型枚举

  const labelTooltipContentData = ref({
    1: '费用生成后立即发起结算提醒',
    2: '每月固定日期进行结算提醒',
    3: '每个季度固定日期进行结算提醒',
    4: '每半年固定日期进行结算提醒',
  })
  // 日期修改
  const changeDateFn = (value = []) => {
    if (value[0]) {
      form.value.contractStartDate = value[0] + ' 00:00:00'
      form.value.contractEndDate = value[1] + ' 23:59:59'
    } else {
      form.value.contractStartDate = undefined
      form.value.contractEndDate = undefined
    }
  }

  const keyupPhone = () => {
    let result = form.value.contactsMobile
    form.value.contactsMobile = result.replace(/\D/g, '')
  }

  provide('form', form)
  const formRef = ref()
  const okLoading = ref(false)
  const bankAccountRef = ref()
  const submitFn = (noticeSuccess) => {
    formRef.value.validate(async (error) => {
      if (!error) {
        const validateRes = await bankAccountRef.value.validate()
        if (validateRes == false) return
        delete form.value.dateContract
        form.value.supplierType = form.value.formSupplierType.toString()
        console.log(form.value)
        const param = {
          ...form.value,
        }
        okLoading.value = true
        supplierSave(param)
          .then(() => {
            console.log(4)
            noticeSuccess()
            navigateBack()
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }

  // 获取详情
  const getSupplierDetail = () => {
    supplierDetail({ id: id.value }).then(({ result }) => {
      form.value = result
      form.value.contractStartDate = result.contractStartDate && result.contractStartDate.split(' ')[0]
      form.value.contractEndDate = result.contractEndDate && result.contractEndDate.split(' ')[0]
      form.value.dateContract = [form.value.contractStartDate, form.value.contractEndDate]
      form.value.formSupplierType = result.supplierType && result.supplierType.split(',')
    })
  }

  onMounted(() => {
    // 编辑
    if (id.value) {
      getSupplierDetail(id.value)
    }
  })
</script>
<style lang="less" scoped>
  .s-form {
    :deep(.custom-divider) {
      margin-top: 0;
    }
    .h-content {
      margin-bottom: 20px;
    }
  }
  .mr-40px {
    margin-right: 40px;
  }
  .upload-wrapper {
    padding: 20px 0 0;
  }
  .alert-txt {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    line-height: 22px;
  }
  .settlement-method {
    width: 438px;
    background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid #e5e8ef;
    margin-top: 16px;
    box-sizing: border-box;
    padding: 16px;

    :deep(.arco-radio-group) {
      display: flex;
    }
    :deep(.arco-radio) {
      width: max-content;
    }
    :deep(.arco-form-item) {
      margin-bottom: 15px;
    }
  }
  .day-box {
    width: 372px;
    display: flex;
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    box-sizing: border-box;
    padding: 16px;
    // margin-top: 16px;
    align-items: center;

    .day-txt {
      margin-left: 16px;
      white-space: nowrap;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2129;
      line-height: 22px;
    }
  }
</style>
